{% extends "base.html" %}
{% block content %}
<div class="header clearfix">
    <h3 class="text-muted">列表查询</h3>
</div>
<div>
    <form action="/index" name="form" method="post" class="form-inline">
        <div class="form-group">
            <input type="text" name="startTime" placeholder="请选择开始日期" id="startTime"/>
            <input type="text" name="endTime" placeholder="请选择结束日期" id="endTime" />
            <button type="submit" class="btn btn-primary">查询</button>
            <a href="/chart" class="btn btn-primary">查看当月报表</a>
        </div>
    </form>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>创建时间</th>
            <th>温度</th>
            <th>湿度</th>
            
        </tr>
        </thead>
        <tbody>
        {% for todo in todos %}
        <tr>
            <td>{{ todo[3] }}</td>
            <td>{{ todo[1] }}</td>
            <td>
                {{ todo[2] }}
            </td>
            
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <div style="display:inline-block;line-height: 20px;">
       {{ pagination.links }}
       <!-- {{ pagination.info }} -->
    </div>
</div>
<script type="text/javascript">
	function reload(){
	    location.reload();
	}
	setInterval(reload,60000);
    $("#startTime").datetimepicker({//选择年月日
            format: 'yyyy-mm-dd hh:mm:ss',
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,//显示‘今日’按钮
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
            clearBtn: true,//清除按钮
            forceParse: 0
        });
    $("#endTime").datetimepicker({//选择年月日
            format: 'yyyy-mm-dd hh:mm:ss',
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,//显示‘今日’按钮
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
            clearBtn: true,//清除按钮
            forceParse: 0
        });
</script>
<style type="text/css">
    .pagination-page-info {
        padding: .6em;
        padding-left: 0;
        width: 40em;
        margin: .5em;
        margin-left: 0;
        font-size: 12px;
    }

    .pagination-page-info b {
        color: black;
        background: #6aa6ed;
        padding-left: 2px;
        padding: .1em .25em;
        font-size: 150%;
    }
</style>
<!--endblock要成对出现-->
{% endblock %}
